<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" @submit.native.prevent>
      <el-form-item label="UID" prop="id">
        <el-input v-model="queryParams.id" placeholder="UID" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="注册时间">
        <el-date-picker v-model="dateRange" style="width: 340px" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :height="tableHeight" v-loading="loading" :data="list" stripe border>
      <el-table-column label="序号" type="index" align="center" width="60" />
      <el-table-column label="UID" prop="id" align="center" width="80" />
      <el-table-column label="用户注册时间" prop="createTime" align="center" width="160" sortable />
      <el-table-column label="入金时间" prop="entryTime" align="center" width="160" sortable />
      <el-table-column label="VIP等级" prop="vipLevel" align="center" width="120">
        <template slot-scope="scope">
          <span>{{selectDictLabel(vipLevel,scope.row.vipLevel)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name" align="center" width="180" />
      <el-table-column label="电话" prop="phone" align="center" width="160" />
      <el-table-column label="入金时间" prop="entryTime" align="center" width="160" sortable />
      <el-table-column label="入金金额" prop="entryAmount" align="center" width="120" sortable />
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

  </div>
</template>

<script>
import { listPullNewGold, listPullNewRule } from "@/api/marketing/pullnew.js";

export default {
  name: "PullNewView", //拉新
  data() {
    return {
      // 列表数据
      list: [{
        name: '测试',
        level: 1
      }],
      dialogVisible: false,
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      timer: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      dateRange: [],

      content: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: this.global.pageSize,
        id: undefined
      },
      pageNum: 1,
      // 表单参数
      form: {},
      //VIP等级（0普通用户，1有效会员，2嘉宾，3黄金）
      vipLevel: [{ label: '普通用户', value: 0 }, { label: '有效会员', value: 1 }, { label: '嘉宾', value: 2 }, { label: '黄金', value: 3 }],
      selectUserId: 0
    };
  },
  computed: {
    tableHeight() {
      return 'calc(100vh - 300px)'
    }
  },
  watch: {
    "queryParams": {
      deep: true,
      handler: function (newV, oldV) {

        if (this.pageNum == newV.pageNum) {
          this.handleQuery();
        } else {
          this.pageNum = newV.pageNum;
        }
      },
    },
    dateRange(newV, oldV) {
      if (newV.length >= 2) {
        this.queryParams.beginTime = String(newV[0]);
        this.queryParams.endTime = String(newV[1]);
        this.getList();
      }
    },
  },

  created() {
    this.getList();
    // this.PullNewRule();
  },

  methods: {
    getList() {
      this.loading = true;
      listPullNewGold(this.queryParams).then((response) => {
        this.list = response.data;
        if (this.list.length) {
          this.total = response.total;
        }
        this.loading = false;
      });
    },

    PullNewRule() {
      this.loading = true;
      listPullNewRule().then((response) => {
        let data = response.data;
        this.content = '入金天数:' + data.goldInput + '天 \n' + ' 订单完成:' + data.succTransaction + '单'
        this.content.replace(/(\n|\r|\r\n|↵)/g, '<br/>')
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },


  },
};
</script>
<style scoped>
.popover {
  position: relative;
  float: right;
}
</style>

